<template>
	<div id="sign">
			<!--中间的容器盒子-->
			<div class="login_box">
				
			  <!--顶部图片的div容器-->
			  <div class="img_box">
			    <img src="@/assets/num1.png" alt="" />
			  </div>
			<h3 class="a">注册</h3>
			  <!--登录表单-->
			  <el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px" 
			    class="loginForm_box">
				<el-form-item label="手机号:" label-width="100px" prop="userPhone">
				  <el-input  v-model="loginForm.userPhone" ></el-input>
				</el-form-item>
			    <el-form-item label="用户昵称:" label-width="100px" prop="userName">
			      <el-input v-model="loginForm.userName" 
			      ></el-input>
			    </el-form-item>
			    <el-form-item label="用户账号:" label-width="100px" prop="userAccount">
			      <el-input  v-model="loginForm.userAccount" ></el-input>
			    </el-form-item>
				<el-form-item label="用户密码:" label-width="100px" prop="userPassword">
				  <el-input type="password" v-model="loginForm.userPassword" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码:" label-width="100px" prop="checkPass">
				  <el-input type="password" v-model="loginForm.checkPass" autocomplete="off"></el-input>
				</el-form-item>
				
				
				
			    <el-form-item class="btns" >
				  <el-button type="success" @click="sign('loginFormRef')">注册</el-button>
				  <el-button @click="resetForm('loginForm')" class="edit">重置</el-button>
				  <el-button type="primary" @click="cancel()" class="edit">取消</el-button>
			    </el-form-item>
			  </el-form>
			</div>
	</div>
</template>

<script>
import { Message } from 'element-ui'
	
	export default { 
  data() {
	  	// var validatePass = (rule, value, callback) => {
	  	// 			if (value === '') {
	  	// 				callback(new Error('请输入密码'));
	  	// 			} else {
	  	// 				if (this.loginForm.checkPass !== '') {
	  	// 					this.$refs.loginForm.validateField('checkPass');
	  	// 				}
	  	// 				callback();
	  	// 			}
	  	// 		};
	  	// 		var validatePass2 = (rule, value, callback) => {
	  	// 			if (value === '') {
	  	// 				callback(new Error('请再次输入密码'));
	  	// 			} else if (value !== this.loginForm.userPassword) {
	  	// 				callback(new Error('两次输入密码不一致!'));
	  	// 			} else {
	  	// 				callback();
	  	// 			}
	  	// 		}; 
   	return{
		// 表单对应的数据对象
		loginForm: {
			//账号
		    userAccount: '',
			//密码
		    userPassword: '',
			//名称
			userName:'',
			//手机号
			userPhone: '',
			//确认密码
			checkPass: '', 
		},
		// 表单校验规则  
		loginFormRules: {
		    userAccount: [
		        { required: true, message: '请输入账号', trigger: 'blur'},
		        { min: 5, max: 11, message: '请输入 5 到 11 个字符', trigger: 'blur'},
				
		    ],
		    userPassword: [
		        { required: true, message: '请输入密码', trigger: 'blur'},
		        { min: 6, max: 10, message: '请输入 6 到 10 个字符', trigger: 'blur'},
				// { validator: validatePass, trigger: 'blur' }
		    ],
			userName: [
			    { required: true, message: '请输入名称', trigger: 'blur'},
			    { min: 1, max: 6, message: '最大6字名称', trigger: 'blur'}
			],
			userPhone: [
			    { required: true, message: '请输入手机号', trigger: 'blur'},
			    { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
			],
			
		}
		}
    },
	 methods: {
			   //注册按钮
			   sign(loginFormRef){
				   this.$refs.loginFormRef.validate(async valid => {
					   if(!valid || this.loginForm.checkPass!=this.loginForm.userPassword){
						   console.log(1,valid)
						   return this.$message.error('注册信息有误，注册失败')
						   					 
					   }
					    
					   const {data : res}= await this.$http.post(`/buy/customer/sign`,this.loginForm)
					    		
					            console.log(200,res);
					            if(res==false) 
					               return this.$message.error('注册失败!')
					            
					            this.$message.success('注册成功')
					    //         // 导航到 Home 组件
					     this.$router.push('/homepage')
					   })
			   },
			   // sign(loginFormRef){
				  //  console.log(this.loginForm)
				   	
				  //      // 判断表单校验是否有效
				  //      this.$refs.loginFormRef.validate(async valid => {
				  //          if(!valid)
				  //              return this.$message.error('注册信息有误')
				   
				  //          // 发注册请求
				  //          const {data : res}= await this.$http.post('/buy/customer/sign',this.loginForm)
				   		
				  //          console.log(200,res);
				  //          if(res==false) 
				  //             return this.$message.error('注册失败!')
				           
				  //          this.$message.success('注册成功')
				  //  //         // 导航到 Home 组件
				  //   this.$router.push('/homepage')
				   
				   
				  //      })
				  //  },
			
			     // 重置按钮
			   resetForm() {
			   			this.$refs.loginFormRef.resetFields()
			   	},
				//取消按钮
			   cancel() {
			   			this.$router.push('/login');
			   },
			},
			}
</script>
			 
<style  scoped>
	.a{
	      margin-left: 203px;
	      margin-top: 76px;
	    font-size: 36px;
	    color: #F56C6C;
	}
		#sign {
		  background-color: #2b4b6b;
		
		  background-repeat:  round;
		  height: 100%;
		}
		
		.login_box {
		       width: 496px;
		       height: 504px;
		  background-color: #fff;
		
		  /* 绝对居中 */
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  transform: translate(-50%, -50%);
		}
		
		.img_box {
		  border: 1px solid #eee;
		  border-radius: 50%;
		  width: 130px;
		  height: 130px;
		  padding: 10px;
		  box-shadow: 0 0 10px;
		  background-color: #fff;
		
		  position: absolute;
		  left: 50%;
		  transform: translate(-50%, -50%);
		
		  img {
		    border: 1px solid #eee;
		    border-radius: 50%;
		    width: 130px;
		    height: 130px;
		  }
		}
		
		.loginForm_box {
		    position: absolute;
		    bottom: 0px;
		    width: 100%;
		    padding: 0 20px;
		    /*宽度会包含边框*/
		    box-sizing: border-box;
		}
		
		.btns {
		    display: flex;
		    justify-content: end;
		}
		</style>	
</style>